<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 表单 -->
        <el-form ref="form" :model="form" label-width="80px">
          <!-- 第一行 -->
          <el-row type="flex" class="row-bg">
            <el-col :span="6"
              ><span style="font-size: 12px; color: pink">
                说明：目前支持学科和关键字条件筛选
              </span>
            </el-col>
            <el-col :span="20"
              ><div class="grid-content bg-purple-light"></div
            ></el-col>
            <el-col :span="3"
              ><el-form-item>
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  @click="$router.push('/questions/new')"
                  >立即创建</el-button
                >
              </el-form-item></el-col
            >
          </el-row>

          <!-- 第二行 -->
          <el-row>
            <el-col :span="6"
              ><el-form-item label="学科" prop="subjectID">
                <el-select
                  v-model="form.subjectID"
                  placeholder="请选择学科"
                  @change="changesubject"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in subjectsList"
                    :key="index"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6"
              ><el-form-item label="二级目录" prop="catalog">
                <el-select
                  v-model="form.catalog"
                  placeholder="请选择二级目录"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in directoryslist"
                    :key="item.value"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6"
              ><el-form-item label="标签" prop="tags">
                <el-select v-model="form.tags" placeholder="请选择标签">
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in tagsList"
                    :key="item.value"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6"
              ><el-form-item label="关键字" prop="keyword">
                <el-input v-model="form.keyword"></el-input> </el-form-item
            ></el-col>
          </el-row>

          <!-- 第三行 -->
          <el-row>
            <el-col :span="6"
              ><el-form-item label="试题类型" prop="questionType">
                <el-select
                  v-model="form.questionType"
                  placeholder="请选择试题类型"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in questionType"
                    :key="index"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6"
              ><el-form-item label="难度" prop="difficulty">
                <el-select v-model="form.difficulty" placeholder="请选择难度">
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in difficulty"
                    :key="index"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6"
              ><el-form-item label="方向" prop="direction">
                <el-select v-model="form.direction" placeholder="请选择方向">
                  <el-option
                    :value="item"
                    :label="item"
                    v-for="(item, index) in direction"
                    :key="index"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6"
              ><el-form-item label="录入人" prop="creator">
                <el-select v-model="form.creator" placeholder="请选择录入人">
                  <el-option
                    :label="item.username"
                    :value="item.id"
                    v-for="(item, index) in userList"
                    :key="index"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6"
              ><el-form-item label="题目备注" prop="remarks">
                <el-input v-model="form.remarks"></el-input> </el-form-item
            ></el-col>
            <el-col :span="6"
              ><el-form-item label="企业简称" prop="shortName">
                <el-input v-model="form.shortName"></el-input> </el-form-item
            ></el-col>
            <el-col class="father" :span="6">
              <el-form-item label="城市" prop="province" class="province">
                <el-select
                  v-model="form.province"
                  placeholder="请选择省份"
                  class="city1"
                  @change="changeprovinces"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in provinces"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label-width="0px" prop="city" class="city">
                <el-select
                  v-model="form.city"
                  placeholder="请选择城市"
                  class="city2"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in citys"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6"
              ><el-form-item class="clearandsearch">
                <el-button @click="clearForm">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-form-item></el-col
            >
          </el-row>

          <!-- 提示信息 -->
          <el-alert
            :title="`数据一共${counts}条`"
            type="info"
            :closable="false"
            show-icon
          >
          </el-alert>
        </el-form>

        <!-- 表格区域 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="180">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="180">
          </el-table-column>
          <el-table-column prop="catalog" label="目录"> </el-table-column>
          <el-table-column prop="questionType" label="题型">
            <template slot-scope="scope">
              {{ scope.row.questionType | formatter }}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干">
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间">
            <template slot-scope="scope">
              {{ scope.row.addDate | formaTime }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度">
            <template slot-scope="scope">
              {{ scope.row.difficulty | formattert }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-view"
                size="mini"
                circle
                plain
                @click="examine(scope.row.id)"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-edit"
                size="mini"
                circle
                plain
                @click="$router.push('/questions/new?id=' + scope.row.id)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                circle
                plain
                @click="del(scope.row.id)"
              ></el-button>
              <el-button
                type="warning"
                icon="el-icon-check"
                size="mini"
                circle
                plain
                @click="accomplish(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="Pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            layout="prev, pager, next, sizes, jumper"
            :total="counts"
            :page-sizes="[5, 10, 15, 20]"
            background
            :page-size="query.pagesize"
          >
          </el-pagination>
        </div>
      </el-card>

      <!-- 弹框 -->
      <el-dialog title="题目预览" :visible.sync="dialogVisible" width="50%">
        <preview-question
          v-if="dialogVisible"
          @closeDialog="dialogVisible = false"
          :examinedialog="examinedialog"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import PreviewQuestion from '../components/preview-question.vue'
import { provinces, citys } from '@/api/hmmm/citys'
import { getUser } from '@/api/base/users'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { gettags } from '@/api/hmmm/tags'
import { getdirectoryslist } from '@/api/hmmm/directorys'
import { getsimple } from '@/api/hmmm/subjects'
import dayjs from 'dayjs'
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
export default {
  name: 'question',
  components: {
    PreviewQuestion
  },
  data () {
    return {
      // 难度
      difficulty,
      // 题型
      questionType,
      // 方向
      direction,

      form: {
        subjectID: null, // 学科
        difficulty: '', // 难度
        questionType: '', // 题型
        province: '', // 省份
        city: '', // 城市
        remarks: '', // 题目备注
        direction: '', // 方向
        catalogID: null, // 目录
        tags: '', // 标签
        creator: '', // 录入人
        creatorID: null, // 录入人ID
        addDate: '', // 录入时间
        keyword: '', // 关键字
        shortName: '' // 企业简称
      },
      // 基础列表
      tableData: [],
      // 学科列表
      subjectsList: [],
      // 目录列表
      directoryslist: [],
      // 标签列表
      tagsList: [],
      // 用户列表
      userList: [],
      // 数据总数
      counts: 0,
      query: {
        // 每页显示条数
        pagesize: 10,
        // 页数
        page: 1
      },
      // 省份
      provinces: provinces(),
      // 城市列表
      citys: [],
      // 控制弹框的显示与隐藏
      dialogVisible: false
      // examinedialog: {}
    }
  },

  // 过滤器
  filters: {
    // 格式化时间
    formaTime (time) {
      return dayjs(time).format('YYYY-MM-DD')
    },
    // 格式化
    formatter (cellValue) {
      // 用数组的 find 方法找到 id = 1 的元素，再取出它的 value
      const obj = questionType.find((item) => item.value === Number(cellValue))
      //   console.log(obj)
      return obj ? obj.label : ''
    },
    formattert (cellValue) {
      // 用数组的 find 方法找到 id = 1 的元素，再取出它的 value
      const obj = difficulty.find((item) => item.value === Number(cellValue))
      //   console.log(obj)
      return obj ? obj.label : ''
    }
  },

  created () {
    // 调用获取基础列表的方法
    this.getlist()
    // 调用获取简单学科列表的方法
    this.subjectsimple()
    // 获取简单学员列表
    this.getUser()
  },

  methods: {
    // 提交到精选题库
    async accomplish (id) {
      const commitRes = await this.$confirm(
        '是否提交该题目, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (commitRes === 'cancel') return this.$message.info('已取消提交')
      await choiceAdd({ id, choiceState: 1 })
      this.$message.success('您已提交成功')
      this.getlist()
    },

    // 删除列表
    async del (id) {
      //   console.log()
      const delRes = await this.$confirm(
        '此操作将永久删除该题目, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (delRes === 'cancel') return this.$message.info('已取消删除')
      // 执行删除方法
      await remove({ id })
      // 先判断rolesList中数组的长度，看删除的是不是最后一条数据
      if (this.tableData.length === 1) {
        // 如果是页码-1
        this.query.page--
        //   同时进行判断删除的是不是第一页的最后一条数据,如果是将页码重置为1
        if (this.query.page < 1) {
          this.query.page = 1
        }
      }
      this.getlist()
    },

    // 查看功能
    async examine (id) {
      // 点击显示弹框
      this.dialogVisible = true
      const res = await detail({ id })
      // console.log(res)
      this.examinedialog = res.data
    },

    // 筛选按钮
    search () {
      this.query.page = 1
      this.getlist(this.form)
    },

    // 清除表单
    clearForm () {
      this.$refs.form.resetFields()
      this.directoryslist = []
      this.tagsList = []
      // 重新获取数据
      this.getlist()
    },

    // 改变省份时触发
    changeprovinces (city) {
      this.citys = citys(city)
    },

    // 获取用户列表
    async getUser () {
      const res = await getUser()
      // console.log(res);
      this.userList = res.data
    },

    // 改变下拉菜单时触发
    async changesubject (id) {
      // 目录
      const MLres = await getdirectoryslist({ subjectID: id })
      // console.log(MLres);
      this.directoryslist = MLres.data
      // 标签
      const BQres = await gettags({ subjectID: id })
      // console.log(BQres);
      this.tagsList = BQres.data
    },

    // 获取简单学科列表
    async subjectsimple () {
      const res = await getsimple()
      //   console.log(res);
      this.subjectsList = res.data
    },

    // 获取简单基础列表
    async getlist (data) {
      const res = await list({ ...this.query, ...data })
      // console.log(res)
      this.counts = res.data.counts
      this.tableData = res.data.items
      // console.log(this.tableData)
    },

    // 点击立即创建按钮
    onSubmit () {},
    // pageSize 改变时会触发
    handleSizeChange (newsize) {
      this.query.pagesize = newsize
      // 重新获取数据
      this.getlist()
    },

    // currentPage 当前页面改变时会触发
    handleCurrentChange (newpage) {
      this.query.page = newpage
      // 重新获取数据
      this.getlist()
    }
  }
}
</script>

<style scoped>
.el-select {
  width: 100%;
}
.father {
  display: flex;
  justify-content: space-between;
}
.city1 {
  width: 100%;
  padding-right: 2px;
}
.city2 {
  width: 100%;
  padding-left: 2px;
  float: right;
}
.clearandsearch {
  float: right;
}
.el-table {
  margin-top: 10px;
}
.Pagination {
  margin: 20px 0px;
  float: right;
}
</style>
